<!doctype html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amaze UI Admin form Examples</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<style type="text/css">
.see {
	width: 130px;
	display: inline-block;
}

#seea {
	margin-left: 180px;
}

#field {
	width: 700PX;
	margin-left: 200px;
}

#areac {
	width: 300px;
	display: inline-block;
}
#btnTypeSave{
	margin-left: 35%;
}
</style>
<% include("/common/inc/_css.html"){} %>
  <link rel="stylesheet" href="${ctxPath}/layui/css/layui.css" media="all" />

</head>
<body>
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<% include("/common/inc/_header.html"){} %>

	<div class="am-cf admin-main">
		<!-- sidebar start -->
		<% include("/common/inc/_menu.html"){} %>
		<!-- sidebar end -->

		<!-- content start -->
		<div class="admin-content">
			<div class="admin-content-body">
				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg">主要信息</strong>
					</div>
				</div>

				<hr>

				<form class="am-form" method="post" id="doc-vld-msg">
					<fieldset>
						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">负责人</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="username" id="username" onfocus="showLayer()" value="${session.user.username!}"
									minlength="2" class="am-input-sm" required />
							</div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">公司名</div>
							<div class="am-u-sm-8 am-u-md-4">
								<input type="text" name="company_name" id="doc-vld-name"
									minlength="2" class="am-input-sm" required />
							</div>
							<div class="am-hide-sm-only am-u-md-6"></div>
						</div>

						<div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">来源</div>
							<div class="am-u-sm-8 am-u-md-4">
								<select data-am-selected="{btnSize: 'sm'}" id="doc-select-1"
									name="clue_source_id" required>
									<%
              						for(var sourcea in source!){%>
									<option value="${sourcea.id}">${sourcea.SOURCE_NAME}</option>
									<%}%>
								</select>
							</div>
							<div class="am-hide-sm-only am-u-md-6"></div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">联系人姓名</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="contact_name" id="doc-vld-name"
									class="am-input-sm" required />
							</div>
						</div>


						<div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">职位</div>
							<div class="am-u-sm-8 am-u-md-4">
								<input type="text" name="job" class="am-input-sm">
							</div>
							<div class="am-hide-sm-only am-u-md-6"></div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">尊称</div>
							<div class="am-u-sm-8 am-u-md-4">
								<select data-am-selected="{btnSize: 'sm'}" id="doc-select-1"
									name="sex" required>
									<option value="0">女士</option>
									<option value="1">先生</option>
								</select>
							</div>
							<div class="am-hide-sm-only am-u-md-6"></div>
						</div>

						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">手机</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="phone" id="doc-vld-name"
									minlength="2" class="am-input-sm" required />
							</div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">邮箱</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="email" id="doc-vld-name"
									minlength="2" class="am-input-sm email" required />
									<a href="#" class="send">发送验证码</a>
							</div>
						</div>
						<br />

						<div id="seea">
							省份:
							<div class="see">
								<select id="provinceList" name="province" onchange="getCity(this.value)">
									<% for(var item in provinceList!){ %>
									<option value="${item}">${item}</option> <%}%>
								</select>
							</div>
							城市:
							<div class="see">

								<select id="cityList" name="city" onchange="getArea(this.value)">

								</select>
							</div>
							地区:
							<div class="see">

								<select id="areaList" name="area">

								</select>
							</div>

							街道:
							<div id="areac">
								<input type="text" name="areac" placeholder="街道" />
							</div>
						</div>

						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">下次联系时间</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text"  class="demo-input" placeholder="请选择日期" id="test1" name="next_contact_time"
									minlength="2" class="am-input-sm" required />
								
						
							</div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">下次联系内容</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="next_contact_info" id="doc-vld-name"
									minlength="2" class="am-input-sm" required />
							</div>
						</div>
						<div>
							<div class="admin-content">
								<div class="admin-content-body">
									<div class="am-cf am-padding am-padding-bottom-0">
										<div class="am-fl am-cf">
											<strong class="am-text-primary am-text-lg">附加信息</strong>
										</div>
									</div>
								</div>
								<hr>
								<fieldset id="field">
									<h2>备注:</h2>
									<p>
										<textarea rows="5" id="intro" name="remark">
					</textarea>
									</p>
								</fieldset>
							</div>
						</div>
						<div class="am-margin">
							<button id="btnTypeSave"
								class="am-btn am-btn-primary am-btn-xs btn-loading-example"
								data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '提交保存'}">
								添加到线索</button>
							<button type="button" class="am-btn am-btn-primary am-btn-xs">重置</button>
							<button type="button" id="pool"
								class="am-btn am-btn-primary am-btn-xs btn-loading-example"
								data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '放入线索池'}">
								添加到线索池</button>
						</div>
					</fieldset>
				</form>


			</div>
			<footer class="admin-content-footer">
				<hr>
				<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed
					under MIT license.</p>
			</footer>
		</div>
		<!-- content end -->

	</div>

	<a href="#"
		class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under
			MIT license.</p>
	</footer>

	<% include("/common/inc/_js.html"){} %>
	<script src="${ctxPath}/assets/laydate/laydate.js"></script> <!-- 改成你的路径 -->
	<!-- ajax提交表单 -->
	<script src="${ctxPath}/assets/js/jquery.form.min.js"></script>
	<script src="${ctxPath}/assets/layer/layer.js"></script>

	<script type="text/javascript">
	//执行一个laydate实例
	laydate.render({
	  elem: '#test1' //指定元素
	});
	
		var selectProvince = $("#provinceList").val();
		getCity(selectProvince);

		function getCity(provinceName) {
			$.ajax({
				url : "${ctxPath}/clue/data_ajax",
				data : {
					"name" : provinceName
				},
				type : 'POST',
				success : function(data) {
					//清理
					$("#cityList").html("");
					//循环
					$.each(data, function(index, item) {
						var option = "<option value='"+item+"'>" + item
								+ "</option>"
						$("#cityList").append(option);
					})
					// 获取选中
					console.log($("#cityList").val());
					var selectCity = $("#cityList").val();
					getArea(selectCity);
				}

			})
		}

		function getArea(cityName) {
			$.ajax({
				url : "${ctxPath}/clue/data_ajax",
				data : {
					"name" : cityName
				},
				type : 'POST',
				success : function(data) {
					//清理
					$("#areaList").html("");
					//循环
					$.each(data, function(index, item) {
						var option = "<option value='"+item+"'>" + item
								+ "</option>"
						$("#areaList").append(option);
					})
				}

			})
		}
		
		function showLayer(){
		    layer.open({
		      type: 2, 
		      title: '选择负责人',
		      area : ['800px' , '520px'],
		      shadeClose: true, //点击遮罩关闭层
		      content: '${ctxPath}/charge/user/layer' //这里content是一个普通的String
		    });
		  }
		
			
	</script>
	<script type="text/javascript">
		 $(function(){
			$("#btnTypeSave").click(function(){
				$(".am-form").ajaxSubmit({
					success : function(data){
						layui.use('layer', function(){ //独立版的layer无需执行这一句
							  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 
							if(data){
								window.location.href="${ctxPath}/clue/list"; 
							}else{
								layer.msg('保存失败!', {icon: 5});
								return false;
							}
						})
					}
				})
				return false;
			
			}); 
			
			$("#pool").click(function(){
				$.post("${ctxPath}/clue/pool",$(".am-form").serialize(),function(data){
					layui.use('layer', function(){ //独立版的layer无需执行这一句
						  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 
						if(data){
							window.location.href="${ctxPath}/cluePool/list"; 
						}else{
							layer.msg('保存失败!', {icon: 5});
							return false;
						}
					})
				},"json")
			})
			
			$(".send").click(function(){
				var email = $(".email").val();
				
					  
					layer.open({
					      type: 2, 
					      title: '验证码',
					      area : ['600px' , '120px'],
					      shadeClose: false, //点击遮罩关闭层
					      content: '${ctxPath}/email?email='+email //这里content是一个普通的String
				    });
			});
		 }); 
	</script>
	<script type="text/javascript">
		$('.btn-loading-example').click(function() {
			var $btn = $(this)
			$btn.button('loading');
			setTimeout(function() {
				$btn.button('reset');
			}, 1000);
		});
	</script>
	
	

<script type="text/javascript">
  /* function showLayer(){
    layer.open({
      type: 2, 
      title: '选择负责人',
      area : ['800px' , '520px'],
      shadeClose: true, //点击遮罩关闭层
      content: '${ctxPath}/charge/user/layer' //这里content是一个普通的String
    });
  } */
</script>
</body>
</html>
